<template>
  <view v-if="shenheStatus != 1 || !shenheAliStatus" class="account-settings">
    <!-- #ifdef WEB -->
    <view
      v-if="this.$utils.isWechat()"
      class="flex-y-center flex-x-sb border-bottom"
      @click.stop="handle('sync')"
    >
      <view class="label">一键同步用户信息</view>
      <view class="right flex-y-center">
        <view> </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <!-- #endif -->

    <!-- 头像 -->
    <button
      @click="clickItem('avatar')"
      class="flex-y-center flex-x-sb m-b-24 u-reset-button tx"
    >
      <view class="label">{{ $t("user.pic") }}</view>
      <view class="right flex-y-center">
        <image :src="userInfo.avatar_url" mode="aspectFit"></image>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </button>
    <!-- </view> -->

    <!-- 昵称性别 -->
    <button
      @click="clickItem('nickname')"
      class="flex-y-center flex-x-sb border-bottom u-reset-button"
    >
      <view class="label">{{ $t("user.nick") }}</view>
      <view class="right flex-y-center">
        <view>{{ userInfo.nickname }}</view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </button>
    <button
      @click="clickItem('gender')"
      class="flex-y-center flex-x-sb m-b-24 u-reset-button"
    >
      <view class="label">{{ $t("user.sex") }}</view>
      <view class="right flex-y-center">
        <view v-if="userInfo.gender == 1">{{ $t("user.man") }}</view>
        <view v-else-if="userInfo.gender == 2">{{ $t("user.woman") }}</view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </button>

    <view
      @click="$utils.toUrl('/user/my/mobile', 'navigate')"
      class="flex-y-center flex-x-sb border-bottom"
    >
      <view class="label">修改手机号</view>
      <view class="right flex-y-center">
        <view>{{ mobile }}</view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <view
      @click="$utils.toUrl('/user/my/password', 'navigate')"
      class="flex-y-center flex-x-sb m-b-24 border-bottom"
    >
      <view class="label">修改密码</view>
      <view class="right flex-y-center">
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>

    <!-- 地址管理 -->
    <view
      @click="$utils.toUrl('/user/my/addressmanage', 'navigate')"
      class="flex-y-center flex-x-sb m-b-24 border-bottom"
    >
      <view class="label">{{ $t("my.address") }}</view>
      <view class="right flex-y-center">
        <view>{{ $t("user.eidtAddress") }}</view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <!-- #ifndef MP-ALIPAY -->
    <!-- #ifndef APP-PLUS -->

    <!-- 联系客户建议反馈 -->
    <button
      open-type="contact"
      class="flex-y-center flex-x-sb border-bottom u-reset-button"
    >
      <view class="label">{{ $t("my.service") }}</view>
      <view class="right flex-y-center">
        <view>{{ $t("user.hard") }}</view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </button>
    <!-- #endif -->

    <view
      @click="$utils.toUrl('/user/my/article-detail', 'navigate')"
      class="flex-y-center flex-x-sb m-b-24"
    >
      <view class="label">{{ $t("my.about") }}</view>
      <view class="right flex-y-center">
        <view> </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view
      class="flex-y-center flex-x-sb border-bottom"
      @click.stop="
        $utils.toUrl('/user/my/article-detail?id=' + stores.client_privacy_id)
      "
    >
      <view class="label">{{ $t("user.policy") }}</view>
      <view class="right flex-y-center">
        <view> </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <view
      class="flex-y-center flex-x-sb border-bottom"
      @click.stop="
        $utils.toUrl('/user/my/article-detail?id=' + stores.client_service_id)
      "
    >
      <view class="label">{{ $t("user.serv") }}</view>
      <view class="right flex-y-center">
        <view> </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <view class="flex-y-center flex-x-sb" @click="showAppModal = true">
      <view class="label">{{ $t("user.cancellation") }}</view>
      <view class="right flex-y-center">
        <view> </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <view
      class="flex-y-center flex-x-sb border-bottom"
      @click.stop="$utils.toUrl('/other/pushSettings/index')"
    >
      <view class="label">{{ $t("user.pushSettings") }}</view>
      <view class="right flex-y-center">
        <view> </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <!-- #endif -->
		<student @customEvent="cash" :bind_status="bind_status" :errcode="errcode"></student>

    <!-- 退出登录 -->
    <view @click="onLogout" class="btn flex-x-center flex-y-center">{{
      $t("user.logout")
    }}</view>

    <!--    <picker
      v-model="showGender"
      :range="pickerParams"
      :value="[userInfo.gender - 1]"
      mode="selector"
      @change="genderCallback"
    ></picker> -->
    <u-select
      v-model="showGender"
      :default-value="[userInfo.gender ? userInfo.gender - 1 : 0]"
      :list="pickerParams"
      @confirm="genderCallback"
    ></u-select>
    <u-modal
      v-model="showAppModal"
      :showTitle="false"
      :confirmText="$t('user.next')"
      :showCancelButton="true"
      @confirm="onAppModalConfirm"
    >
      <view style="padding: 30rpx; font-size: 28rpx; text-align: center">
        <text style="font-size: 35rpx">{{ $t("user.conditions") }}</text
        ><br />
        <view style="margin-top: 30rpx">
          {{ $t("user.conditions1") }}<br />
          {{ $t("user.conditions2") }}<br />
          {{ $t("user.conditions3") }}
        </view>
      </view>
    </u-modal>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
	import writeOffCode from "@/api/writeOffCode.js";
import Shenhe from "@/components/shenhe/shenhe";
	import http from "../../common/http.js";
import { setH5UserInfo } from "@/api/login";

export default {
  components: { Shenhe },
  data() {
    return {
      wechatInfo: {},
      showGender: false,
      pickerParams: [
        {
          value: 1,
          label: this.$t("user.man")
        },
        {
          value: 2,
          label: this.$t("user.woman")
        }
      ],
      cat: null,
      userInfo: "",
				showAppModal: false,
				bind_status: null,
				errcode:null,
    };
  },
  computed: {
    mobile: function () {
      if (this.userInfo == "") {
        return "";
      }
      let mobile = this.userInfo.binding;
      let reg = /(\d{3})\d{4}(\d{4})/;
      return mobile.replace(reg, "$1****$2");
    }
  },
  methods: {
			// 调用函数
			cash: function(event) {
				writeOffCode
					.studentCertification({
						wx_studentcheck_code: event.detail.data
					})
					.then((res) => {
						this.bind_status = res.bind_status
						this.errcode=res.errcode
					});

			},

    onAppModalConfirm() {
      this.showAppModal = true;
      uni.showModal({
        title: this.$t("order.prompt"),
        content: this.$t("user.delAccount"),
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync("token");
            uni.removeStorageSync("userInfo");
            uni.removeStorageSync("wx_login_code");
            uni.showToast({
              title: this.$t("mdAdmin.submitSuc"),
              icon: "none"
            });
            setTimeout(() => {
              this.$utils.goBack();
            }, 1500);
          } else {
            this.showAppModal = false;
          }
        }
      });
    },
    onLogout() {
      uni.showModal({
        title: this.$t("order.prompt"),
        content: this.$t("user.confirmLogout"),
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync("token");
            uni.removeStorageSync("userInfo");
            uni.removeStorageSync("wx_login_code");
            uni.showToast({
              title: this.$t("user.logoutSuc"),
              icon: "none",
              duration: 1000
            });
            setTimeout(() => {
              this.$utils.goBack();
            }, 1500);
          }
        }
      });
    },
    // 点击的item项
    clickItem(key) {
      this.modifyUserInfo(false, key);
    },

    // 修改信息
    async modifyUserInfo(isWechat, key) {
      let params = {
        avatar_url: "",
        nickname: "",
        gender: ""
      };
      if (isWechat) {
        params.avatar_url = this.wechatInfo.avatarUrl;
        params.nickname = this.wechatInfo.nickName;
        params.gender = this.wechatInfo.gender;

        // 请求修改
        const res = await this.$allrequest.user.modifyUserInfo(params);
        if (res.code == 0) {
          this.getMyinfo();
        }
        return;
      }

      switch (key) {
        case "nickname":
          this.$utils.toUrl("/user/my/nickname", "navigate");
          break;
        case "gender":
          this.showGender = true;
          break;
        case "avatar":
          this.modifyAvatar();
          break;

        default:
          break;
      }
    },
    // 性别回调
    async genderCallback(val) {
      const res = await this.$allrequest.user.modifyUserInfo({
        gender: val[0].value
      });
      if (res.code == 0) {
        this.getMyinfo();
      }
    },
    // 修改头像
    modifyAvatar() {
      try {
        this.$utils.uploadImage(
          1,
          async (res) => {
            const resultRes = await this.$allrequest.user.modifyUserInfo({
              avatar_url: res
            });
            if (resultRes.code == 0) {
              this.getMyinfo();
            }
          },
          () => {
            this.$utils.toast(this.$t("user.imgFail"));
          }
        );
      } catch (error) {
      }
    },
    // 获取用户信息
    async getMyinfo() {
      try {
        const res = await this.$allrequest.request.userindex({}, true);
        if (res.code != 0) throw res;
        this.userInfo = res.data.user_info;
      } catch (error) {
        this.$utils.toast(error.msg || this.$t("user.err"));
      }
    },

    handle(type) {
      switch (type) {
        case "sync":
          if (this.userInfo.oauth_redirect_url) {
            window.location.href = this.userInfo.oauth_redirect_url;
          }
          break;

        default:
          break;
      }
    }
  },

  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t("title.mySetting")
    });

    if (
      this.$utils.isWechat() &&
      window.location.href.indexOf("?code") !== -1
    ) {
      let params = this.$utils.oneValues(window.location.href);
      setH5UserInfo({
        code: params.code
      }).then((res) => {
        if (!res.code) {
          this.getMyinfo();
        }
      });
    } else {
      this.getMyinfo();
    }
  }
};
</script>

<style lang="scss" scoped>
.m-b-24 {
  margin-bottom: 24rpx;
}
.border-bottom {
  border-bottom: 1px solid #f1f1f1;
}
.account-settings {
  box-sizing: border-box;
  min-height: 100vh;
  background: #f2f2f2;
  > view,
  > button {
    padding: 0 36rpx;
    background-color: #fff;
    height: 100rpx;
  }
  .label {
    flex: 1;
    width: 0;
    text-align: initial;
    font-size: 30rpx;
    color: #1d1d1d;
  }
  .right {
    color: #888;
    font-size: 28rpx;
    .iconfont {
      font-size: 22rpx;
    }
  }
  > .tx {
    height: 136rpx;
    .right {
      > image {
        width: 88rpx;
        height: 88rpx;
        background: #f2f2f2;
        border-radius: 120rpx;
        margin-right: 10rpx;
      }
    }
  }
}

.btn {
  margin: 80rpx auto 0;
  width: 678rpx;
  height: 88rpx;
  background: #ffffff;
  border: 2rpx solid #cccccc;
  border-radius: 120rpx;

  font-size: 30rpx;
  color: #262626;
}

.popup-box {
  padding: 20rpx 36rpx;
  > view:nth-child(1) {
    line-height: 100rpx;
  }
  button {
    flex: 1;
    background: #fff;
    height: 100%;
    padding: 0;
    border: 0;
    box-shadow: initial;
    &::after {
      border: 0;
    }
  }
}
</style>
